{include file="public/mobileheader"}
<style>
    body{
        padding-bottom: 3em;
        margin: 0;
        padding: 0;
    }
    .mui-table-view{
        padding: 0;
    }
    .top{
        height: 5.5em;
    }
    .bg1{
        background-color: #00ccff;
    }
    .bg2{
        background-color: white;
    }
    .bg1 a{
        color: white;
    }
    .bg2 a{
        color: black;
    }
    .top-item{
        height: inherit;
        width: 25%;
        display: inline-block;
        float: left;
        text-align: center;
        padding-top: 1em;
    }
    .top-icon{
        font-size: 2.4em;
        margin-bottom: 5px;
    }

</style>
<body>
    <div class="top bg1">
        <div class="top-item">
            <a href="{:url('agent_order/index')}">
                <span class="top-icon mui-icon mui-icon-home"></span>
                <div class="">订货</div>
            </a>
        </div>
        <div class="top-item">
            <a href="{:url('agent_order/myOrderList')}">
                <span class="top-icon mui-icon mui-icon-chat"></span>
                <div class="">待发货</div>
            </a>
        </div>
        <div class="top-item">
            <a href="{:url('agent_order/hadDelivery')}">
                <span class="top-icon mui-icon mui-icon-upload"></span>
                <div class="">已发货</div>
            </a>
        </div>
        <div class="top-item">
            <a href="{:url('agent_order/keyInventory')}">
                <span class="top-icon mui-icon mui-icon-paperplane"></span>
                <div class="">仓库</div>
            </a>
        </div>
    </div>
    <div class="top bg2">
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-home"></span>
                <div class="">邀请下级</div>
            </a>
        </div>
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-chat"></span>
                <div class="">查看下级</div>
            </a>
        </div>
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-upload"></span>
                <div class="">代理管理</div>
            </a>
        </div>
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-paperplane"></span>
                <div class="">我的返利</div>
            </a>
        </div>
    </div>
    <hr>
    <div class="top bg2">
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-home"></span>
                <div class="">我的业绩</div>
            </a>
        </div>
        <div class="top-item">
            <a href="{:url('Article/index')}">
                <span class="top-icon mui-icon mui-icon-chat"></span>
                <div class="">素材中心</div>
            </a>
        </div>
        <div class="top-item">
            <a href="#">
                <span class="top-icon mui-icon mui-icon-upload"></span>
                <div class="">地址管理</div>
            </a>
        </div>
        <div class="top-item">
            <a href="{:url('authorize/index')}">
                <span class="top-icon mui-icon mui-icon-paperplane"></span>
                <div class="">授权信息</div>
            </a>
        </div>
    </div>

    
    <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">Home</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">Chat</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">location</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">Search</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">Phone</div></a></li>
        </ul>
    </div>

    {include file="public/nav"}
</body>
{include file="public/mobilefooter"}
<script>
    var nav = document.getElementsByClassName('active');
    nav[2].style.color = '#007aff';
</script>

</html>